<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="formRef" :model="form" :rules="rules" label-position="top">
				<uni-forms-item label="字典类型" name="dictType" required>
					<uni-easyinput v-model="form.dictType" placeholder="请输入字典类型" />
				</uni-forms-item>
				<uni-forms-item label="数据标签" name="dictLabel" required>
					<uni-easyinput v-model="form.dictLabel" placeholder="请输入数据标签" />
				</uni-forms-item>
				<uni-forms-item label="数据键值" name="dictValue" required>
					<uni-easyinput v-model="form.dictValue" placeholder="请输入数据键值" />
				</uni-forms-item>
				<uni-forms-item label="样式属性" name="cssClass" required>
					<uni-easyinput v-model="form.cssClass" placeholder="请输入样式属性" />
				</uni-forms-item>
				<uni-forms-item label="显示排序" name="dictSort" required>
					<uni-easyinput v-model="form.dictSort" placeholder="请输入显示排序" />
				</uni-forms-item>
				<uni-forms-item label="回显样式" name="listClass" required>
					<xy-select v-model="form.listClass" :data="listClassOptions" placeholder="回显样式" clearable placement="top" />
				</uni-forms-item>
				<uni-forms-item label="状态" name="status" required>
					<xy-checkbox v-model="form.status" :data="sys_normal_disable" placeholder="状态" clearable placement="top" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" :maxlength="-1" autoHeight v-model="form.remark" placeholder="请输入备注" />
				</uni-forms-item>
				<uni-forms-item>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="submitForm()">确认</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="cancel()">取消</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import useDictStore from '@/store/modules/dict'
	import { optionselect as getDictOptionselect } from "@/pages_work/api/system/dict/type";
	import { getType } from "@/pages_work/api/system/dict/type";
	import { listData, getData, delData, addData, updateData } from "@/pages_work/api/system/dict/data";
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable
	} = proxy.useDict("sys_normal_disable");

	/** 表单数据 */
	const form = ref({});

	/** 表单检验规则 */
	const rules = ref(proxy.uniappRules({
		dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
		dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
		dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
	}))
	
	/** 数据标签回显样式 */
	const listClassOptions = ref([
	  { value: "default", label: "默认" }, 
	  { value: "primary", label: "主要" }, 
	  { value: "success", label: "成功" },
	  { value: "info", label: "信息" },
	  { value: "warning", label: "警告" },
	  { value: "danger", label: "危险" }
	]);
	
	/** 字典类型 */
	const dictType = ref("");

	onLoad((params) => {
		uni.setNavigationBarTitle({
			title: params.title
		});
		if (params.dictCode == undefined || params.dictCode == null || params.dictCode == '') {
		} else {
			handleUpdate(params);
		}
		dictType.value = params.dictType
		form.value.dictType = params.dictType
	})

	/** 取消按钮 */
	const cancel = () => {
		uni.navigateBack()
	}

	/** 提交按钮 */
	const submitForm = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			if (valid) {
				if (form.value.dictCode != undefined) {
					updateData(form.value).then(response => {
						useDictStore().removeDict(dictType.value);
						proxy.$modal.msgSuccess("修改成功");
						setTimeout(uni.navigateBack, 1000);
					});
				} else {
					addData(form.value).then(response => {
						useDictStore().removeDict(dictType.value);
						proxy.$modal.msgSuccess("新增成功");
						setTimeout(uni.navigateBack, 1000);
					});
				}
			}
		});
	};
	
	/** 修改角色 */
	const handleUpdate = (row) => {
		const id = row.dictCode;
		getData(id).then(response => {
			form.value = response.data;
		});
	}
	
	onUnload(() => {
		uni.$emit('update')
	})
	
</script>

<style lang="scss">
	@import "@/static/scss/work/form.scss";
</style>